<template>
  <div class="work-day">
    <el-form
      ref="tform"
      :model="dataForm"
      label-width="120px"
      style="margin-top: 20px"
    >
      <el-form-item label="工作日">
        <el-checkbox-group v-model="dataForm.selectWeek" @change="handleCheckedChange">
          <el-checkbox
            v-for="week in dataForm.weekday"
            :label="week.value"
            :key="week.value"
            >{{ week.title }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="上午时间">

          <el-time-select
  v-model="dataForm.morningStartTime"
  :picker-options="{
    start: '06:00',
    step: '00:15',
    end: '24:00'
  }"
  placeholder="选择上班时间">
</el-time-select>
<span style="margin:0px 10px">至</span>
 <el-time-select
  v-model="dataForm.morningEndTime"
  :picker-options="{
    start: '06:00',
    step: '00:15',
    end: '24:00'
  }"
  placeholder="选择下班时间">
</el-time-select>
      </el-form-item>
      <el-form-item label="下午时间">
         <el-time-select
  v-model="dataForm.afterStartTime"
  :picker-options="{
    start: '10:30',
    step: '00:15',
    end: '24:00'
  }"
  placeholder="选择上班时间">
</el-time-select>
<span style="margin:0px 10px">至</span>
 <el-time-select
  v-model="dataForm.afterEndTime"
  :picker-options="{
    start: '16:30',
    step: '00:15',
    end: '24:00'
  }"
  placeholder="选择下班时间">
</el-time-select>
      </el-form-item>
       <el-form-item label="加班开始时间">
       <el-time-select
  v-model="dataForm.addTime"
  :picker-options="{
    start: '16:30',
    step: '00:15',
    end: '24:00'
  }"
  placeholder="选择加班时间">
</el-time-select>
<p style="font-size:12px;color:#999999;">加班不满半个小时，不纳入加班时长</p>
      </el-form-item>
      <el-form-item label="考勤规则">
        <span style="font-size:14px;color:#999999;">迟到扣款</span>
        <el-input v-model="dataForm.latermoney" style="width:80px;margin:0px 10px;" placeholder="输入金额"></el-input>
        <span>元</span>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left:30px" type="warning">重置</el-button>
    <el-button type="primary" @click="saveConfig(dataForm)">保存</el-button>

      </el-form-item>
    </el-form>
    
  </div>
</template>

<script>
import {insertAttend,getAttend,updateAttend} from '@/api/getData'
import moment from "moment";

export default {
  data() {
    return {
      dataForm: {
        weekday: [
        {
          title: "星期一",
          value: 1,
        },
        {
          title: "星期二",
          value: 2,
        },
        {
          title: "星期三",
          value: 3,
        },
        {
          title: "星期四",
          value: 4,
        },
        {
          title: "星期五",
          value: 5,
        },
        {
          title: "星期六",
          value: 6,
        },
        {
          title: "星期日",
          value: 7,
        },
      ],
      selectWeek: [1, 2, 3, 4, 5],
      morningStartTime: "",
      morningEndTime: "",

      afterStartTime: "",
            afterEndTime: "",

      addTime:'',
      latermoney:50,
      wid:''
      },
      
    };
  },
  mounted(){
    this.getConfig();
  },
  methods: {
    handleCheckedChange(val) {
      this.dataForm.selectWeek = val;
    },
    getConfig(){
      getAttend().then((res)=>{
          console.log(res);
          var data = res.data[0];
          if (!data) {
            return;
          }
          this.dataForm.wid = data.id;
          var workdays = data.work_day.split(',');
          var selects = [];
          workdays.forEach(element => {
            selects.push(parseInt(element));
          });
          this.dataForm.selectWeek = selects
          this.dataForm.latermoney = data.later_money;
          this.dataForm.morningStartTime = data.morning_up_time;
          this.dataForm.morningEndTime = data.morning_down_time;
          this.dataForm.afterStartTime = data.after_up_time;
          this.dataForm.afterEndTime = data.after_up_time;
          this.dataForm.addTime = data.add_time;
          var sl = data.work_day;
          console.log( moment(momentString));

      });
    },
    saveConfig(val){
      const format = 'HH:mm'
      var params = {};
      params.morning_up_time = this.dataForm.morningStartTime;
      params.morning_down_time = this.dataForm.morningEndTime;
      params.after_up_time = this.dataForm.afterStartTime;
      params.after_down_time = this.dataForm.afterEndTime;
      params.add_time = this.dataForm.addTime;
      params.work_day = this.dataForm.selectWeek.join(',');
      console.log(params);
      if (this.dataForm.wid) {
        params.id = this.dataForm.wid;
updateAttend(params).then((res) => {
            if (res.code == 200) {
              this.$message('成功');
            }
        })
      }else{
insertAttend(params).then((res) => {
            if (res.code == 200) {
              this.$message('成功');
            }
        })
      }
      

    },
    

  },
};
</script>

<style lang="less" scoped>
.work-day {
    position: relative;
    .el-button {
        width: 100px;
        height: 35px;
    }
}
</style>